<template>
  <view class="order_detail">
    <!-- 背景板 -->
    <!-- #ifdef APP-PLUS |H5 -->
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <!-- #endif -->
    <div class="beijing">
      <!-- 返回按钮 -->
      <div class="backIcon" @click="leftClick">
        <uni-icons type="back" size="24"></uni-icons>
      </div>
      <div class="content">
        <div class="content-top">
          <div class="content-top-icon"></div>
          <span class="content-top-span">
            <span v-if="orderInfo.order_status == 0">待审核</span>
            <span v-else-if="orderInfo.order_status == 1">备货中</span>
            <span v-else-if="orderInfo.order_status == 2">配送中</span>
            <span v-else-if="orderInfo.order_status == 3">已完成</span>
            <span v-else-if="orderInfo.order_status == 4">已取消</span>
          </span>
        </div>
        <div class="content-bottom">
          <span v-if="orderInfo.order_status == 0"
            >货到付款，等待审核通过...</span
          >
          <span v-if="orderInfo.order_status == 1">已审核，等待备货发货</span>
          <span v-if="orderInfo.order_status == 2">配送中...</span>
          <span v-if="orderInfo.order_status == 3"
            >您的订单已完成，欢迎您再次光临！</span
          >
        </div>
      </div>
    </div>

    <!-- 我的地址 -->
    <div class="context">
      <div class="address">
        <div class="address-time">{{ orderInfo.createdTime }}</div>
        <div class="address-content">
          <div class="address-content-left">
            <div class="leftIcon"></div>
            <div class="address-content-left-context">
              <span class="hidden addressName">{{ orderInfo.address }}</span>
              <span class="hidden addressLag"
                >{{ orderInfo.nickname }} {{ orderInfo.mobile }}</span
              >
            </div>
          </div>
          <div class="address-content-right">
            <div class="rightIcon"></div>
          </div>
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="info">
        <!-- 商品卖家名称 -->
        <div class="info-shop">
          <div class="info-shop-logo">
            <image
              :src="
                'https://copartner.oss-cn-beijing.aliyuncs.com/' +
                  company_logo || '/static/home_menu_image/shop-img.png'
              "
              style=""
            ></image>
          </div>
          <div class="info-shop-title">{{ company_name }}</div>
          <div class="info-shop-icon"></div>
        </div>
        <div class="line"></div>

        <!-- 商品信息 -->
        <div
          class="info-list"
          v-for="(item, index) in goodsList.slice(0, goodsListNum)"
          :key="index"
        >
          <div class="info-list-image">
            <img class="img" :src="item.img" mode="aspectFit" alt="" />
          </div>

          <div class="info-list-shop">
            <div class="shop-top">
              <div class="shop-top-name">
                <span>{{ item.name }}</span>
                <span style="font-size: 20rpx; margin-left: 20rpx">{{
                  item.spu_name
                }}</span>
              </div>
              <span>× {{ Number(item.order_num) }}</span>
            </div>
            <div class="shop-meddle">
              <!-- <span>下单数量：{{ Number(item.order_num) }}</span> -->
              <span>配送金额：￥{{ Number(item.sort_money).toFixed(2) }}</span>
              <span
                >配送数量：{{
                  orderInfo.order_status == 2 || orderInfo.order_status == 3
                    ? Number(item.sort_num)
                    : 0
                }}</span
              >
            </div>
            <div class="shop-bottom">备注:{{ item.remark }}</div>
          </div>
        </div>
        <div class="remaining">
          <div class="remainings" v-if="goodsList.length > 2">
            <view
              @click="expendList('isexpend', 'goodsListNum', goodsList.length)"
              class="flex-center"
              style="margin-top: 14rpx"
            >
              <span v-if="isexpend">点击收起</span>
              <span v-else>剩余商品</span>

              <!-- <u-icon name="arrow-up" v-if="isexpend"></u-icon>
              <u-icon name="arrow-down" v-else></u-icon> -->
              <image
                src="/static/images/xiangx.svg"
                mode="scaleToFill"
                v-if="isexpend"
                class="imgx"
              />
              <image
                src="/static/images/xiangs.svg"
                mode="scaleToFill"
                class="imgs"
                v-else
              />
            </view>
          </div>
        </div>
        <div class="line"></div>
        <div class="info-sum">
          <span class="info-sum-num">共{{ goodsList.length }}件</span>
          <div class="info-sum-title">
            <div class="name">商品总金额:￥</div>
            <div class="num">{{ orderInfo.order_money }}</div>
          </div>
        </div>
      </div>

      <!-- 订单信息 -->
      <div class="order">
        <div class="order-list" v-for="(item, index) in list" :key="index">
          <template v-if="item.key == 'methods'">
            <span>{{ item.name }}</span>
            <span class="bold">{{
              orderInfo[item.type] == 1 ? "在线付款" : "货到付款"
            }}</span>
          </template>
          <template v-else>
            <span>{{ item.name }}</span>
            <span class="bold">
              <span v-if="item.name != '积分'">￥</span
              >{{ orderInfo[item.type] }}</span
            >
          </template>
        </div>

        <div class="line"></div>
        <div class="order-list2">
          <span>支付信息</span>
          <span
            style="
              font-size: 22rpx;
              font-family: PingFang SC;
              font-weight: bold;
              color: #f55726;
            "
            >{{ orderInfo.pay_status == 0 ? "未支付" : "已支付" }}</span
          >
        </div>
      </div>

      <div class="order">
        <div class="order-list" v-for="(item, index) in list2" :key="index">
          <template v-if="item.key == 'time'">
            <span style="color: #999">{{ item.name }}</span>
            <span>{{
              orderInfo[item.type] == 0 ? "不限" : `${startTime}~${endTime}`
            }}</span>
          </template>
          <template v-else-if="item.key == 'status'">
            <span style="color: #999">{{ item.name }}</span>
            <span
              >￥{{
                orderInfo.order_status == 2 || orderInfo.order_status == 3
                  ? orderInfo[item.type]
                  : "0.00"
              }}</span
            >
          </template>
          <template v-else>
            <span style="color: #999">{{ item.name }}</span>
            <span
              ><span v-if="item.name == '退货金额'">￥</span
              >{{ orderInfo[item.type] }}</span
            >
          </template>
        </div>
      </div>
      <div style="height: 160rpx"></div>
    </div>
    <div class="card">
      <div
        class="btn"
        v-if="orderInfo.order_status == 0"
        @click.stop="cancelOrder"
      >
        取消订单
      </div>
      <div
        class="btn"
        v-if="orderInfo.order_status == 3 || orderInfo.order_status == 4"
        @click.stop="oneMoreOrder"
      >
        再来一单
      </div>
      <div
        class="btn shouhuo"
        v-if="orderInfo.order_status == 2"
        @click.stop="confirmOrder"
      >
        确认收货
      </div>
      <div
        class="btn"
        v-if="orderInfo.order_status == 2 || orderInfo.order_status == 3"
        @click.stop="addOrderReturn"
      >
        申请退货
      </div>
    </div>
  </view>
</template>

<script>
let app = getApp();
import { mixins } from "@/mixins/judgment.js";
import { $https } from "@/static/js/request.js";
import MixinShowprice from "@/static/js/mixinshowprice.js";
export default {
  mixins: [mixins],
  data() {
    return {
      list: [
        {
          name: "满减",
          type: "full_reduction_money",
        },
        {
          name: "优惠券",
          type: "discount_money",
        },
        {
          name: "运费",
          type: "delivery_fee",
        },
        {
          name: "下单金额",
          type: "should_money",
        },
        {
          name: "差额",
          type: "balance",
        },
        {
          name: "实付金额",
          type: "real_money",
        },
        {
          name: "支付方式",
          type: "is_prior_payment",
          key: "methods",
        },
        {
          name: "积分",
          type: "points",
        },
      ],
      list2: [
        { name: "下单时间", type: "createdTime" },
        {
          name: "订单编号",
          type: "order_sn",
        },
        {
          name: "配送日期",
          type: "send_time",
        },
        {
          name: "配送时间",
          type: "send_time_id",
          key: "time",
        },
        {
          name: "配送金额",
          type: "send_money",
          key: "status",
        },
        {
          name: "退货金额",
          type: "return_money",
        },
        {
          name: "备注",
          type: "remark",
        },
      ],

      logo: "",
      showLogo: 0,
      company_name: "",
      company_logo: "",
      delivery_fee: "",
      orderInfo: {}, //订单信息
      goodsList: [], //商品列表
      startTime: "",
      createdTime: "",
      endTime: "",
      return_info: [],
      settlement_info: [],
      type: 0,
      goodsListNum: 2,
      isexpend: false,
    };
  },
  mixins: [MixinShowprice],
  onReady() {
    getApp().setTitle();
  },
  onLoad(option) {
    this.getData(option.id);
    this.logo = uni.getStorageSync("logo");
    this.showLogo = uni.getStorageSync("showLogo");

    uni.$on("detailitem", (item) => {
      // console.log("111", item.company_logo);
      this.company_name = item.company_name;
      this.company_logo = item.company_logo;
      this.delivery_fee = item.delivery_fee;
    });
  },
  onUnload() {
    // #ifdef MP-WEIXIN
    uni.$emit("updateorder", () => {});
    // #endif
    uni.$off("detailitem");
  },
  methods: {
    //展开
    expendList(flag, num, length) {
      this[flag] = !this[flag];
      if (this[flag]) {
        this[num] = length;
      } else {
        this[num] = 2;
      }
    },

    getData(id) {
      $https(
        "GET",
        "getOrderDetail",
        {
          oid: id,
        },
        (res) => {
          this.type = res.data.data.order_info.is_prior_payment;
          console.log("this.type", this.type);
          this.return_info = res.data.data.return_info;
          this.settlement_info = res.data.data.settlement_info;
          var info = res.data.data.order_info;
          var ms = Number(info.created_at + "000");
          var now = new Date();
          now.setTime(ms);
          var date =
            now.getFullYear() +
            "-" +
            (now.getMonth() + 1) +
            "-" +
            now.getDate() +
            " " +
            now.getHours() +
            ":" +
            now.getMinutes() +
            ":" +
            now.getSeconds();
          info.createdTime = date;
          this.orderInfo = info;
          this.startTime = info.send_time_period.start_time;
          this.endTime = info.send_time_period.end_time;
          this.goodsList = res.data.data.goods_info;
          this.createdTime = res.data.data.order_info.createdTime;
          console.log("res.data.data", res.data.data);
        }
      );
    },
    leftClick() {
      uni.$emit("updateorder", {
        id: app.globalData.tabIndex,
      });
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
    toDetail(id) {
      let type = this.type == 0 ? 2 : 1;
      uni.navigateTo({
        url: `/pages/user/final_statement/final_statement_detail?id=${id}&type=${type}`,
      });
    },
    returninfo(id) {
      uni.navigateTo({
        url: `/pages/user/return_goods/return_goods_detail?id=${id}`,
      });
    },
    cancelOrder() {
      //取消订单
      let that = this;
      let datas = {
        oid: this.goodsList[0].oid,
        company_id: this.orderInfo.company_id,
      };
      uni.showModal({
        title: "提示",
        content: "是否取消订单",
        success: function (res) {
          if (res.confirm) {
            $https("GET", "cancelOrder", datas, (res) => {
              if (res.data.errcode == 0) {
                that.$emit("getData");
              } else {
                uni.showToast({
                  icon: "none",
                  title: res.data.errmsg,
                });
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    oneMoreOrder() {
      //再来一单
      let that = this;
      let datas = {
        oid: this.goodsList[0].oid,
        company_id: this.orderInfo.company_id,
      };
      $https("GET", "onceAgain", datas, (res) => {
        if (res.data.errcode == 0) {
          this.orderInfo.supplier_id = this.orderInfo.company_id;
          this.$store.commit("changeCompanyInfo", this.orderInfo);
          sessionStorage.setItem(
            "changeCompanyInfo",
            JSON.stringify(this.orderInfo)
          );
          uni.switchTab({
            url: `/pages/tabar/shopcart`,
          });
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.errmsg,
          });
        }
      });
    },
    confirmOrder() {
      //确认收货
      let that = this;
      let datas = {
        oid: this.goodsList[0].oid,
        company_id: this.orderInfo.company_id,
      };

      uni.showModal({
        title: "提示",
        content: "是否确定收货?",
        success: function (res) {
          if (res.confirm) {
            $https("GET", "confirmOrder", datas, (res) => {
              if (res.data.errcode == 0) {
                that.$emit("getData");
              } else {
                uni.showToast({
                  icon: "none",
                  title: res.data.errmsg,
                });
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    addOrderReturn() {
      //申请退货
      let that = this;
      let datas = {
        oid: this.goodsList[0].oid,
        company_id: this.orderInfo.company_id,
      };
      uni.navigateTo({
        url: `/pages/user/return_goods/return_list?id=${this.item.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.beijing {
  width: 750rpx;
  height: 445rpx;
  background-image: url("@/static/images/beijingtu.png");
  background-size: 100% 100%;
  .backIcon {
    position: absolute;
    top: calc(var(--status-bar-height) + 29rpx);
    left: 45rpx;
  }
  .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 80rpx;
    &-top {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      &-icon {
        width: 32rpx;
        height: 32rpx;
        background-image: url("@/static/images/icon.png");
        background-size: 100% 100%;
      }
      &-span {
        color: #fff;
        margin-left: 17rpx;
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 500;
      }
    }
    &-bottom {
      color: #fff;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      margin-top: 30rpx;
    }
  }
}

.context {
  position: absolute;
  top: 248rpx;
  width: 100%;
  height: 100%;
  z-index: 10;
  .address {
    width: 690rpx;
    height: 200rpx;
    background: #fff;
    margin: 0 auto;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    &-time {
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999393;
      padding: 17rpx 0 0 0;
      margin-left: 24rpx;
      margin-right: 24rpx;
      border-bottom: 1rpx solid #ececec;
    }
    &-content {
      display: flex;
      width: calc(100% - 48rpx);
      height: 150rpx;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 24rpx 0 24rpx;
      &-left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        .leftIcon {
          width: 32rpx;
          height: 36rpx;
          background-image: url("@/static/images/address.png");
          background-size: 100% 100%;
        }
        &-context {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 70%;
          margin-left: 30rpx;
          .hidden {
            width: 480rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .addressName {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
          }
          .addressLag {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
          }
        }
      }
      &-right {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        width: 40rpx;
        .rightIcon {
          width: 28rpx;
          height: 28rpx;
          background-image: url("@/static/images/right.png");
          background-size: 100% 100%;
        }
      }
    }
  }
}

.info {
  width: 660rpx;
  background: #fff;
  padding: 30rpx 15rpx;
  margin: 20rpx auto 0;
  border-radius: 20rpx;
  &-shop {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    &-logo {
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      image {
        width: 100%;
        height: 100%;
      }
    }
    &-title {
      margin-left: 18rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    &-icon {
      width: 28rpx;
      height: 28rpx;
      background-image: url("@/static/images/right.png");
      background-size: 100% 100%;
      margin-left: 13rpx;
    }
  }

  .remaining {
    color: #999999;
    display: flex;
    justify-content: center;
    align-items: center;
    .remainings {
      .imgx {
        margin-top: 4rpx;
        margin-top: 4rpx;
        margin-left: 6rpx;
        width: 22rpx;
        height: 22rpx;
      }
      .imgs {
        margin-top: 6rpx;
        margin-left: 6rpx;
        width: 22rpx;
        height: 15rpx;
      }
    }
    span {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    // .u-icon {
    //   width: 18rpx;
    //   height: 10rpx;
    // }
  }

  .line {
    width: 640rpx;
    height: 1rpx;
    margin: 20rpx auto 0;
    background: #ececec;
  }

  &-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: calc(100% - 30rpx);
    padding: 0 15rpx;
    &-image {
      width: 130rpx;
      height: 130rpx;
      border-radius: 16rpx;
      margin-top: 25rpx;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-shop {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 480rpx;
      padding: 20rpx 0;
      .shop-top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        &-name {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
      }
      .shop-meddle {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #999999;
        margin-top: 20rpx;
      }

      .shop-bottom {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        margin-top: 20rpx;
      }
    }
  }
  &-sum {
    width: 100%;
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    &-num {
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    &-title {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-top: 10rpx;
      .name {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      .num {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
    }
  }
}

.order {
  width: 630rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 20rpx auto 0;
  &-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    margin-bottom: 12rpx;
    .bold {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
  }

  .line {
    width: 640rpx;
    height: 1rpx;
    margin: 20rpx auto 0;
    background: #ececec;
  }

  &-list2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 25rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
}

.card {
  position: fixed;
  background: #fff;
  bottom: 0;
  width: 750rpx;
  height: 150rpx;
  z-index: 99;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  border-top: 1rpx solid #ececec;
  .btn {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    border: 1px solid #999999;
    border-radius: 28rpx;
    height: 58rpx;
    line-height: 58rpx;
    text-align: center;
    width: 140rpx;
    margin-right: 20rpx;
    margin-top: 22rpx;
  }
  .shouhuo {
    border: 1px solid #40ae36;
    color: #40ae36;
  }
}

/deep/.uni-icons {
  color: #fff !important;
}
.order_info {
  background-color: #f6f6f6;

  .prop {
    white-space: nowrap;
    margin-right: 20rpx;
  }

  .pay > view,
  .money > view {
    margin-top: 20rpx;
  }

  .gray_font {
    color: gray;
  }
}

.order_detail {
  .pay > view,
  .money > view {
    display: flex;
    justify-content: space-between;
  }

  .pay,
  .money {
    background-color: #fff;
    border-bottom: 1px solid #e8e9e9;
    padding: 10rpx 30rpx 18rpx;
    margin-bottom: 10rpx;
  }

  .pay > view:nth-child(n + 2) text:last-child {
    color: gray;
  }

  .good_info {
    padding-top: 25rpx;
  }

  .title {
    font-size: 18rpx;
    font-weight: bold;
  }

  text {
    font-size: 18rpx;
  }
}

.good_info {
  padding: 0 30rpx 30rpx;
  background-color: #fff;

  .good_info_fff {
    background-color: #f6f6f6;
    padding-bottom: 30rpx;
    border-radius: 14rpx;
  }

  .title {
    height: 60rpx;
    line-height: 60rpx;
    margin-left: 20rpx;
  }

  .sign_good {
    width: 640rpx;
    font-size: 24rpx;
    background: #fff;
    border-radius: 14rpx;
    margin: 0 auto;
    padding: 20rpx;

    + .sign_good {
      margin-top: 20rpx;
    }

    .yellow_tag {
      font-size: 20rpx;
      padding: 2rpx 12rpx;
      background: #ff9900;
      border-radius: 6rpx;
      color: #fff;
      margin-left: 8rpx;
    }

    .top {
      margin-bottom: 20rpx;

      .imgs {
        width: 120rpx;
        height: 120rpx;
        position: relative;

        .logo {
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
        }

        .img {
          width: 120rpx;
          max-height: 100rpx;
          margin-right: 40rpx;
        }
      }

      .name {
        margin-left: 20rpx;
      }
    }

    .row {
      margin-bottom: 20rpx;

      text:first-child {
        display: inline-block;
        width: 60%;
      }
    }

    .note {
      color: #9a9a9a;
      white-space: normal;
      word-break: break-all;
    }

    .spu {
      margin-left: 20rpx;
      padding: 4rpx 8rpx;
      background: #f5f5f5;
      border-radius: 8rpx;
      font-size: 24rpx;
      transform: scale(0.8);
    }
  }
}

.line {
  color: #0f0acb;
  text-decoration: underline;
}
</style>
